<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>视频下面的按钮</title>
    <link rel="stylesheet" type="text/css" href="./../../css/video.css" />
    <style>
        .yanse {
            position: absolute;
            height: 5px;
            background-color: red;
            z-index: 0;
            top: 0px;
        }

        body {
            /*background: #487389;*/
        }

        .jindutiao1 {
            left: 75px;
            right: 40px;
            left: 120px;
            right: 50px;
            bottom: 23.5px;
        }

        .bottom2 {
            position: fixed;
            bottom: 15px;
            z-index: 1;
            left: 10px;
            right: 15px;
        }

        .bofang {
            bottom: 0px;
            width: 20px;
            margin-right: 0px;
        }

        .bofang img {
            width: 12px;
        }

        .zanting {
            width: 20px;
            height: 20px;
            left: 2px;
            bottom: 0px;
        }

        .zanting img {
            width: 16px;
        }

        .img_kuang {
            width: 20px;
            height: 20px;
        }

        .img_kuang img {
            width: 16px;
            position: absolute;
            top: 3px;
            right: -7px;
        }
        .img_kuang .img2 {
          width: 20px;
          position: absolute;
          top: 1px;
          right: 1px;
        }

        input[type=range] {
            width: 100%;
            margin-left: 0px;
        }

        .zhezhao {
            position: fixed;
            bottom: 32px;
            left: 30px;
            right: 25px;
            z-index: 24;
            height: 5px;
            height: 20px;
            /*background: red;*/
        }

        .zhezhao1 {
            left: 108px;
            right: 40px;
            bottom: 10px;
        }
        .slide-fade-enter-active {
          transition: all .2s ease;
        }
        .slide-fade-leave-active {
          transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
          transform: translateY(10px);
          opacity: 0;
        }
    </style>
</head>

<body>
    <div id="vm" v-cloak>
        <div class="video test">
          <transition name="slide-fade"  v-if="shikanflag">
            <div>
                <div class="jindutiao " :class="quanping?'jindutiao1':''" id="mask" ref="mask">
                    <span class="yanse" :style="'width:'+ width2+'%;'"></span>
                    <input type="range" min="0" max="100" step="1" ref="bar" id="bar" v-bind:value='jinduwidth' @change="rangech($event)" @touchstart="touchstarta($event)" @touchmove="touchmovea($event)" @touchend="touchenda($event)">
                </div>
                <!-- <div class="zhezhao" :class="quanping?'zhezhao1':''" v-show="weibowan"></div> -->
                <div class="bottom" :class="quanping?'bottom2':''">
                    <div @click="bofang()" v-show="bfstyle=='zanting'" class="img_wjt bofang">
                        <img src="./../../image/VIP/wjt.png" alt="">
                    </div>
                    <div @click="zanting()" v-show="bfstyle=='bofang'" class="img_wjt zanting">
                        <img src="./../../image/zanting.png" alt="">
                    </div>
                    <div class="img_wjt zanting" v-show="bfstyle=='replay'" @click="replay()">
                        <img src="./../../image/12.png" alt="">
                    </div>
                    <span style="color:#fff;font-size:13px;margin-left:26px;"><span v-html="settime(positiotime2)"></span>/<span v-html="settime(alltime)"></span></span>
                    <div @click="qxquanpingclick()" v-if="quanping" class="img_kuang">
                        <img src="./../../image/4.png" alt="" class="img2">
                    </div>
                    <div @click="quanpingclick()" class="img_kuang" v-else>
                        <img src="./../../image/VIP/kuang.png" alt="">
                    </div>

                </div>
            </div>
          </transition>
          <transition name="slide-fade" v-else>
            <div v-show="isweibofangwan">
                <div class="bottom" :class="quanping?'bottom2':''">
                    <div class="img_wjt zanting" @click="replay2()">
                        <img src="./../../image/12.png" alt="">
                    </div>
                    <div @click="qxquanpingclick()" v-if="quanping" class="img_kuang">
                        <img src="./../../image/4.png" alt="" class="img2">
                    </div>
                    <div @click="quanpingclick()" class="img_kuang" v-else>
                        <img src="./../../image/VIP/kuang.png" alt="">
                    </div>
                </div>
            </div>
          </transition>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var startX = startY = endX = endY = 0,alltimes;
    var vm = new Vue({
        el: '#vm',
        data: {
            bfstyle: 'zanting',
            quanping: false,
            width2: 0,
            alltime: '24:00',
            positiotime: 0,
            positiotime2: 0,
            alltime2: 1,
            isflagtuo: true,
            canplaytime: 0,
            feiyongflag: false,
            shikanflag: true,
            // weibowan:false,
            isweibofangwan:true,
            tiemyidao:false
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                // if ('addEventListener' in document) {
                //     document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                //     }, false);
                // }
                if (api.pageParam.freetime) {
                  // _this.weibowan = true
                }
                if (api.pageParam.freetime == 0) {

                } else {
                    _this.feiyongflag = true
                    _this.canplaytime = parseFloat(api.pageParam.freetime) * 1000;
                }
                api.addEventListener({
                    name: 'keguankanguanbi'
                }, function(ret, err) {
                    _this.feiyongflag = false
                    _this.canplaytime = 0
                });
                api.addEventListener({
                    name: 'Complete'
                }, function(ret, err) {
                  setTimeout(function() {
                    _this.bfstyle = 'replay'
                    api.setFrameAttr({
                        name: 'beisu',
                        hidden: true
                    });
                    api.setFrameAttr({
                        name: 'suoding',
                        hidden: true
                    });
                    api.closeFrame({
                        name: 'suodingbg'
                    });
                  },500)
                  setTimeout(function() {
                    _this.isweibofangwan = false
                    _this.shikanflag = false;
                    api.setFrameAttr({
                        name: 'videocontrl',
                        hidden: false
                    });
                  },600)
                  // _this.weibowan = true
                });
                api.addEventListener({
                    name: 'statePlaying'
                }, function(ret, err) {
                  // alert(JSON.stringify(ret))
                  if (!_this.tiemyidao) {
                    if (ret.value.state == 'palying') {
                          _this.bfstyle = 'bofang'
                    } else {
                        _this.bfstyle = 'zanting'
                    }
                    _this.shikanflag = true
                  }
                      // _this.weibowan = false
                });
                api.addEventListener({
                    name: 'statefull'
                }, function(ret, err) {
                    if (ret.value.value == 1) {
                        _this.quanping = true
                    } else {
                        _this.quanping = false
                    }
                });

                api.addEventListener({
                    name: 'alltime'
                }, function(ret, err) {
                    if (ret) {
                        _this.alltime = ret.value.value
                        _this.alltime2 = ret.value.value
                        console.log(ret.value.value)
                        alltimes  = ret.value.value;
                    }
                });
                api.addEventListener({
                    name: 'positiotime'
                }, function(ret, err) {
                    if (ret) {
                        _this.positiotime = ret.value.value
                        _this.positiotime2 = ret.value.value
                        _this.width2 = parseInt(_this.positiotime2*100/alltimes)
                        if (_this.feiyongflag) {
                            if (ret.value.value >= _this.canplaytime) {
                                _this.bfstyle = 'replay'
                                api.sendEvent({
                                    name: 'zanting'
                                });
                                api.setFrameAttr({
                                    name: 'beisu',
                                    hidden: true
                                });
                                setTimeout(function() {
                                  api.setFrameAttr({
                                      name: 'videocontrl',
                                      hidden: false
                                  });
                                },600)
                                api.sendEvent({
                                    name: 'daodabofangshijian'
                                });
                                _this.isweibofangwan = true
                                // setTimeout(function() {
                                  _this.shikanflag = false;
                                  _this.tiemyidao = true
                                // },500)
                                if (_this.quanping) {
                                    _this.goumaivip2()
                                } else {
                                    _this.goumaivip()
                                }
                            } else {
                                api.sendEvent({
                                    name: 'daodabofangshijian1'
                                });
                            }
                        }
                    }
                });

            }
        },
        computed: {
            jinduwidth: function() {
                return this.width2
            }
        },
        methods: {
            init: function() {

            },
            rangech: function(event) {
                // this.width2 = this.$refs.bar.value;
                // if (this.width2>=100) {
                //   this.width2=100
                // }
                // alert(this.width2)
                // this.settimeplay()
                // this.isflagtuo = false
            },
            touchstarta: function(event) {
                var touch = event.targetTouches[0];
                // 滑动起点的坐标
                startX = touch.pageX;
                this.width2 = (startX - this.$refs.mask.offsetLeft) * 100 / (this.$refs.mask.offsetWidth);
                if (this.width2 >= 100) {
                    this.width2 = 100
                }
            },
            touchmovea: function(event) {
                var touch = event.targetTouches[0];
                endX = touch.pageX;
                this.width2 = (endX - this.$refs.mask.offsetLeft) * 100 / (this.$refs.mask.offsetWidth);
                if (this.width2 >= 100) {
                    this.width2 = 100
                }
            },
            touchenda: function(event) {
                var distanceX = endX - startX;
                this.width2 = (endX - this.$refs.mask.offsetLeft) * 100 / (this.$refs.mask.offsetWidth);;
                if (this.width2 >= 100) {
                    this.width2 = 100
                }
                this.settimeplay();
                this.isflagtuo = false
            },
            settimeplay: function(ret) {
                // console.log(this.width2*this.alltime2/100)
                // console.log(this.alltime2)
                var _this = this;
                if (this.alltime2 == 1) {
                    this.width2 = 0
                    api.toast({
                        msg: '您未开始播放，播放后可拖动',
                        duration: 2000,
                        location: 'bottom'
                    });
                    return
                }
                var settime = Math.ceil(this.width2 * this.alltime2/100000);
                var canplay = parseInt(this.canplaytime/1000)
                console.log(settime)
                console.log(canplay)
                if (this.feiyongflag) {
                    if (canplay <= settime) {
                        api.sendEvent({
                            name: 'zanting'
                        });
                        api.sendEvent({
                            name: 'daodabofangshijian'
                        });
                        api.setFrameAttr({
                            name: 'beisu',
                            hidden: true
                        });
                        api.setFrameAttr({
                            name: 'suoding',
                            hidden: true
                        });
                        api.closeFrame({
                            name: 'suodingbg'
                        });
                        setTimeout(function() {
                          api.setFrameAttr({
                              name: 'videocontrl',
                              hidden: false
                          });
                        },600)
                        setTimeout(function() {
                          _this.shikanflag = false
                          _this.bfstyle = 'replay'
                          _this.width2 = canplay * 1000 * 100 / _this.alltime2
                          _this.positiotime2 = canplay * 1000
                          }, 500)
                            // console.log(999)
                        if (this.quanping) {
                            this.goumaivip2()
                        } else {
                            this.goumaivip()
                        }

                    } else {
                        this.bfstyle = 'bofang'
                        api.sendEvent({
                            name: 'settime',
                            extra: {
                                value: settime,
                            }
                        });
                        api.sendEvent({
                            name: 'daodabofangshijian1'
                        });
                    }
                } else {
                    this.bfstyle = 'bofang'
                    api.sendEvent({
                        name: 'settime',
                        extra: {
                            value: settime,
                        }
                    });
                }
            },
            settime: function(ret) {
                var time = parseInt(ret) / 1000; //先将毫秒转化成秒
                if (null != time && "" != time) {
                    if (time > 60 && time < 60 * 60) {
                        var time2 = parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60)
                        if (time2 < 10) {
                            time2 = '0' + time2;
                        }
                        if (parseInt(time / 60.0) < 10) {
                            time = '0' + parseInt(time / 60.0) + ":" + time2;
                        } else {
                            time = parseInt(time / 60.0) + ":" + time2;
                        }
                    } else if (time >= 60 * 60 && time < 60 * 60 * 24) {
                        var time2 = parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
                            parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60);
                        if (time2 < 10) {
                            time2 = '0' + time2;
                        }
                        time = parseInt(time / 3600.0) + ":" + parseInt((parseFloat(time / 3600.0) -
                                parseInt(time / 3600.0)) * 60) + ":" + time2
                            // console.log(time+'999')
                    } else if (time < 60 && time > 10) {
                        time = '00' + ":" + parseInt(time)
                            // console.log(time+'999')
                    } else if (time >=0&&time < 10) {
                        time = '00' + ":" + '0' + parseInt(time)
                            // console.log(time)
                    } else {
                        time = parseInt(time);
                    }
                }else {
                    time = '00' + ":" + '00'
                }
                return time;
            },
            goumaivip: function() {
                api.openFrame({
                    name: 'goumai',
                    url: './goumai.html',
                    rect: {
                        x: 0,
                        y: api.pageParam.safeArea,
                        w: api.frameWidth,
                        h: 210
                    },
                    reload: true,
                    pageParam: {
                         videodetail: api.pageParam.videodetail
                    },
                    bgColor: 'rgba(0,0,0,0)'
                });
            },
            goumaivip2: function() {
                api.openFrame({
                    name: 'goumai',
                    url: './goumai.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto',
                    },
                    reload: true,
                    pageParam: {
                        videodetail: api.pageParam.videodetail
                    },
                    bgColor: 'rgba(0,0,0,0)'
                });
            },
            bofang: function() {
                this.bfstyle = 'bofang';
                api.sendEvent({
                    name: 'bofang'
                });
            },
            zanting: function() {
                this.bfstyle = 'zanting';
                api.sendEvent({
                    name: 'zanting'
                });
            },
            replay: function() {
              this.width2=0
                this.bfstyle = 'bofang';
                _this.shikanflag = true
                api.sendEvent({
                    name: 'replay'
                });
                api.closeFrame({
                    name: 'goumai'
                });
            },
            replay2: function() {
                this.width2=0
                this.shikanflag = true
                this.bfstyle = 'bofang';
                api.sendEvent({
                    name: 'replay'
                });

                api.closeFrame({
                    name: 'goumai'
                });
                // _this.shikanflag = false
                this.width2=0
                this.shikanflag = true
            },
            qxquanpingclick: function() {
                api.sendEvent({
                    name: 'qiehuanfullscreen'
                });
            },
            quanpingclick: function() {
                api.sendEvent({
                    name: 'allfull'
                });
                api.bringFrameToFront({
                    from: 'fanhui'
                });
            },
            liuliang: function() {
                this.bfstyle = 'bofang';
                api.sendEvent({
                    name: 'bofang'
                });
            }
        }
    })
</script>

</html>
